<div class="box box-warning flat">
    <div class="box-body">
        {$html}
    </div>
</div>
<script>
    + function (runId, currentId, addCallback, editCallback, delCallback, checkboxName, checkboxChecked, sortCallback) {
        var currentItem = $('#' + runId + ' [data-id="' + currentId + '"]');
        var treeviewEl = $('#' + runId);
        currentItem.addClass('active').parents('li').removeClass('closed');
        treeviewEl.treeview();

        if (addCallback) {
            treeviewEl.on('click', '.treeview-item-add', function () {
                var itemEl = $(this).parent();
                return window[addCallback](itemEl);
            });
        }

        if (editCallback) {
            treeviewEl.on('click', '.treeview-item-edit', function () {
                var itemEl = $(this).parent();
                return window[editCallback](itemEl);
            });
        }

        if (delCallback) {
            treeviewEl.on('click', '.treeview-item-del', function () {
                var itemEl = $(this).parent();
                return window[delCallback](itemEl);
            });
        }

        if (checkboxName) {
            var checkedList = [];
            for (var i = 0; i < checkboxChecked.length; i++) {
                checkedList.push('' + checkboxChecked[i]);
            }
            treeviewEl.find('.treeview-item-box').each(function () {
                var el = $(this);
                var dataId = el.attr('data-id')
                var checked = checkboxChecked.indexOf(dataId) >= 0;
                var checkboxEl = $('<input type="checkbox">').attr('name', checkboxName).attr('checked', checked).prop('checked', checked).val(dataId);
                el.prepend(checkboxEl);
            });
            treeviewEl.delegate('[type="checkbox"]', 'change', function () {
                var el = $(this);
                var checked = el.is(':checked');
                el.parent().siblings('ul').find('[type="checkbox"]').each(function () {
                    $(this).attr('checked', checked).prop('checked', checked);
                });
            });
        }

        if (sortCallback) {
            treeviewEl.find('ul').dragsort({
                dragSelector: '.treeview-item-sort',
                itemSelector: 'li,i.treeview-item',
                dragSelectorExclude: '.hitarea',
                placeHolderTemplate: '<li style="height:20px;width:100%;border:1px dashed #000000;"></li>',
                dragEnd: function () {
                    return window[sortCallback](treeviewEl);
                }
            });
        }

    }('{$runId}', '{$currentId}', '{$addCallback}', '{$editCallback}', '{$delCallback}', '{$checkboxName}', '{$checkboxChecked}', '{$sortCallback}');

</script>